<template>
	<view class="mall-goods-item">
		<image class="img" :src="img"></image>
		<view class="goods-info">
			<text class="name">{{item.name}}</text>
			<text class="sku" v-if="item.skuName">分类：{{item.skuName}}</text>
			<text class="sku" v-else="item.skuName">默认</text>
			<view class="more"  >
				<text class="label">{{slogan}}</text>
			</view>
		</view>
		<view class="prices">
			<text class="price">¥{{item.price?item.price:item.nowPrice}}</text>
			<text class="quantity">x {{item.quantity?item.quantity:item.number}}</text>
			<view class="back" v-if="showBack">
				售后
			</view>
		</view>
	</view>
</template>

<script>
	import CONFIG from '@/config/index.js'
	export default {
		props:{
			showBack:Boolean,
			item:Object
		},
		computed:{
			slogan(){
				return  getApp().globalData.config.slogan
			},
			img(){
				return CONFIG.IMG_HEAD + this.item.img
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="stylus">
	.mall-goods-item
		display flex
		.img
			width:181upx;
			height:176upx;
			border-radius:10upx;
			margin-right 30upx
		.goods-info
			flex 1
			display flex
			flex-direction column
			justify-content space-between
			padding 12upx 0
			overflow hidden
			.name
				font-size 24upx
				color #4E3D07
				text-overflow ellipsis
			.sku
				width fit-content
				color #A1A1A1
				font-size 22upx
				padding 14upx 17upx
				background-color #FBFAFA
				border-radius 5upx
			.more
				.label
					width fit-content
					color #F7895E
					font-size 20upx
					padding  0 9upx
					background-color #FBDFD4
		.prices
			padding 12upx 0
			display flex
			flex-direction column
			align-items flex-end
			.price
				color #4E3D07
				font-size 24upx
			.quantity
				flex 1
				color #A1A1A1
				font-size 24upx
				margin-top 10upx
			.back
				width:130upx;
				height:48upx;
				border:1px solid rgba(111,111,111,1);
				border-radius:24upx;
				font-size 24upx
				color #6F6F6F
				display flex
				align-items center
				justify-content center
			
</style>
